<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:animate-elem-78-t </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-animate-elem-78-t.html">Full version</a>, <a href="basic-animate-elem-78-t.html">Basic version</a>, <a href="tiny-animate-elem-78-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/animate.html#AnimationElements">19.2 Animation elements</a></p>
 <p>
				<a href="full-animate-elem-77-t.html">animate-elem-77-t ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-animate-elem-80-t.html">→ animate-elem-80-t</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>animate-elem-78-t</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/animate-elem-78-t.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/animate-elem-78-t.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of animate-elem-78-t" src="../png/full-animate-elem-78-t.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
            <p>
                This test demonstrates how &lt;set&gt; elements change 
                graphics properties on a &lt;shape&gt; element. For
                each of the graphics properties being tested, 3 
                &lt;set&gt; elements are set. The first &lt;set&gt; 
                element acts directly on the &lt;shape&gt; element. The
                &lt;set&gt; element acts on a &lt;g&gt; containing
                children. The third &lt;set&gt; element acts on an &lt;a&gt;
                containing children. In each case the test validates that
                the animated value set on the &lt;g&gt; and &lt;a&gt;
                elements is inherited by the &lt;shape&gt; element.
                All the &lt;set&gt; elements have a begin attribute 
                set to 0s with an offset of 1s after end.
                So, the animation will apply 1s after the document is loaded
                and will repeat every 1s after the animation ends. 
            </p>
            <p>
                The first &lt;set&gt; validates the fill property, with
                fill set to orange. When applied directly to the &lt;shape&gt; 
                element, the &lt;rect&gt; fill value will change to orange   
                when it is translated to the right every 1s. When applied 
                to the &lt;g&gt; and &lt;a&gt; elements, the &lt;rect&gt; 
                inherits the fill value and is orange.
            </p>
            <p>
                The second &lt;set&gt; validates the fill-style property,
                with fill-style set to evenodd. When applied to the
                &lt;shape&gt; element, the &lt;polyline&gt; fill-style is 
                changed from nonzero to evenodd. When applied to the
                &lt;g&gt; and &lt;a&gt; elements, the &lt;polyline&gt; inherits
                the evenodd fill-style. 
            </p>
            <p>
                the third &lt;set&gt; validates the stroke property.
                In this case fill is set to none. When stroke is applied 
                to the &lt;shape&gt; element, the &lt;rect&gt; on the right
                appears with the stroke color. When applied to the &lt;g&gt; and 
                &lt;a&gt; elements, the &lt;rect&gt; inherits the stroke property.
            </p>
            <p>
                the fourth &lt;set&gt; validates the stroke-width property,
                with stroke-width set to 4. When stroke-width is applied 
                to the &lt;shape&gt; element, the &lt;line&gt; on the right
                has a width of 4. When applied to the &lt;g&gt; and 
                &lt;a&gt; elements, the &lt;line&gt; inherits the stroke-width.
            </p>
            <p>
                the fifth &lt;set&gt; validates the stroke-linecap property,
                with stroke-linecap set to round. When stroke-linecap is applied 
                to the &lt;shape&gt; element, the &lt;line&gt; stroke-linecap
                value switches from butt to round. When applied to the &lt;g&gt;
                and &lt;a&gt; elements, the &lt;line&gt; inherits the 
                square stroke-linecap.
            </p>
            <p>
                the sixth &lt;set&gt; validates the stroke-linejoin property,
                with stroke-linejoin set to bevel. When stroke-linejoin is applied 
                to the &lt;shape&gt; element, the &lt;line&gt; stroke-linejoin
                value switches from miter to bevel. When applied to the &lt;g&gt;
                and &lt;a&gt; elements, the &lt;line&gt; inherits the 
                bevel stroke-linejoin.
            </p>
            <p>
               the seventh &lt;set&gt; validates the stroke-miterlimit property,
                with stroke-miterlimit set to 10. When stroke-miterlimit 
                is applied to the &lt;shape&gt; element, the miter-length to 
                stroke-width ratio exceeds the miter-limit and the 
                &lt;polyline&gt; switches from bevel to miter.When applied 
                to the &lt;g&gt; and &lt;a&gt; elements,the &lt;line&gt; 
                inherits the stroke-miterlimit.
            </p>
            <p>
                the eighth &lt;set&gt; validates the stroke-dashoffset property,
                with stroke-dashoffset set to 5.5. When stroke-dashoffset is applied 
                to the &lt;shape&gt; element, the &lt;line&gt; has a different 
                dashing pattern. When applied to the &lt;g&gt; and &lt;a&gt; 
                elements, the &lt;line&gt; inherits the property.
            </p>
            <p>
                the ninth &lt;set&gt; validates the display property,
                with display set to none. When display is applied 
                to the &lt;shape&gt; element, the &lt;rect&gt; does not
                appear on the right. When applied to the &lt;g&gt; and &lt;a&gt; 
                elements, the &lt;line&gt; inherits the display property and
                hence is not seen.
            </p>
            <p>
                the tenth &lt;set&gt; validates the visibility property,
                with visibility set to hidden. When visibility is applied 
                to the &lt;shape&gt; element, the &lt;rect&gt; is hidden 
                on the right. When applied to the &lt;g&gt; and &lt;a&gt; 
                elements, the &lt;line&gt; inherits the visibility property 
                and hence is not seen.
            </p>
            <p>
                the eleventh &lt;set&gt; validates the color property,
                with color set to blue. When color is applied to the 
                &lt;shape&gt; element, the &lt;rect&gt; on the right 
                switches from default color of black to blue. When 
                applied to the &lt;g&gt; and &lt;a&gt; 
                elements, the &lt;line&gt; inherits the color property. 
            </p>

		</div>
<div class="linkbar"> <p>
				<a href="full-animate-elem-77-t.html">animate-elem-77-t ←</a>
				<a href="full-index.html">index</a>
				<a href="full-animate-elem-80-t.html">→ animate-elem-80-t</a>
						</p></div>
</body>
</html>
